<script setup>
// No reactive state needed for this component
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Tooltip Component</h1>

    <section class="mb-8">
      <h2 class="mb-4 text-xl font-semibold">Basic Tooltips</h2>

      <div class="mb-6 mt-4">
        <h3 class="mb-2">Simple Tooltip</h3>
        <div class="flex flex-wrap gap-4">
          <div class="flex items-center">
            <Tooltip content="This is a tooltip">
              <Button>Hover Me</Button>
            </Tooltip>
          </div>

          <div class="flex items-center">
            <Tooltip
              content="Disabled button tooltip"
              relationship="description"
            >
              <Button disabled>Disabled Button</Button>
            </Tooltip>
          </div>
        </div>
      </div>

      <div class="mb-6 mt-4">
        <h3 class="mb-2">Tooltip Positions</h3>
        <div class="mt-2 flex flex-wrap gap-4">
          <Tooltip content="Top tooltip" positioning="top">
            <Button>Top</Button>
          </Tooltip>

          <Tooltip content="Bottom tooltip" positioning="bottom">
            <Button>Bottom</Button>
          </Tooltip>

          <Tooltip content="Start tooltip" positioning="start">
            <Button>Start</Button>
          </Tooltip>

          <Tooltip content="End tooltip" positioning="end">
            <Button>End</Button>
          </Tooltip>
        </div>
      </div>

      <div class="mb-6 mt-4">
        <h3 class="mb-2">Tooltip Appearances</h3>
        <div class="mt-2 flex flex-wrap gap-4">
          <Tooltip content="Default appearance" appearance="default">
            <Button>Default</Button>
          </Tooltip>

          <Tooltip content="Inverted appearance" appearance="inverted">
            <Button>Inverted</Button>
          </Tooltip>

          <Tooltip content="Lightweight appearance" appearance="lightweight">
            <Button>Lightweight</Button>
          </Tooltip>
        </div>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="mb-4 text-xl font-semibold">Advanced Tooltips</h2>

      <div class="mb-6">
        <h3 class="mb-2">Rich Content Tooltip</h3>
        <div class="flex flex-wrap gap-4">
          <Tooltip>
            <Button>Hover for Details</Button>
            <template #content>
              <div class="p-2">
                <h4 class="font-bold">Rich Content</h4>
                <p>This tooltip contains formatted content.</p>
                <ul class="mt-2 list-disc pl-4">
                  <li>Item 1</li>
                  <li>Item 2</li>
                </ul>
              </div>
            </template>
          </Tooltip>
        </div>
      </div>

      <div class="mb-6">
        <h3 class="mb-2">Delay and Trigger Options</h3>
        <div class="flex flex-wrap gap-4">
          <Tooltip content="Appears with delay" :delay="500">
            <Button>Delayed Tooltip</Button>
          </Tooltip>

          <Tooltip
            content="Click to show/hide"
            :hover-delay="0"
            trigger-type="click"
          >
            <Button>Click Triggered</Button>
          </Tooltip>
        </div>
      </div>

      <div class="mb-6">
        <h3 class="mb-2">With Arrow</h3>
        <div class="flex flex-wrap gap-4">
          <Tooltip content="Tooltip with arrow" with-arrow>
            <Button>With Arrow</Button>
          </Tooltip>

          <Tooltip content="No arrow" :with-arrow="false">
            <Button>Without Arrow</Button>
          </Tooltip>
        </div>
      </div>
    </section>
  </div>
</template>
